<template>
	<div>
		<TodoHeader @addTodo="addTodo" />
		<!-- 示例：$refs引用子组件对象 -->
		<TodoMain ref="theMain" />
		<TodoFooter :lastLength="lastLength" :status="status" @updateStatus="updateStatus" />
	</div>
</template>

<script>
	import TodoHeader from './components/TodoHeader.vue'
	import TodoMain from './components/TodoMain.vue'
	import TodoFooter from './components/TodoFooter.vue'

	export default {
		components: {
			TodoHeader,
			TodoMain,
			TodoFooter
		},
		data() {
			return {
				// todo事项数据列表存放TodoMain组件实例
				lastLength: null,
				status: 'all',
			}
		},
		mounted() {
			//初始值  示例：$refs引用子组件对象
			this.lastLength = this.$refs.theMain.lastLength
		},
		// 示例：$refs引用子组件对象
		methods: {
			updateStatus(status) {
				this.$refs.theMain.status = status
				this.status = this.$refs.theMain.status
			},
			addTodo(name) {
				this.$refs.theMain.addTodo(name)
			}
		}
	}
</script>